/*
 * @Project: Canvas for all
 * @description: Este arquivo tem como finalidade conter todas as funções utilizadas dentro do quadro do Canvas
 * @file: canvas.js
 */
function replaceAll(str, de, para){
	var pos = str.indexOf(de);
	while (pos > -1){
		str = str.replace(de, para);
		pos = str.indexOf(de);
	}
	return (str);
}


var postit;

$(document).on( "pageinit", "#canvas", function( event ) {		
	
	/*
	* @author: Leidson Cruz 
	* @description: Da o load do projeto
	*/


    
	var parameters = $(this).data("url").split("?")[1];
	
    parameter = parameters.split("&")[0].replace("id=","");
    var titulo = ""; 
    if (typeof parameters.split("&")[1] != "undefined"){
    	titulo = replaceAll(parameters.split("&")[1].replace("titulo=",""), '+', ' ');
    }
    
   	if(typeof titulo === "undefined" && titulo != ""){
   	
        $('#appHeader > h1').html(decodeURIComponent(titulo));

    }

    var db = window.openDatabase("CanvasForAll8", "1.16", "Canvas Mobile",2000000);
    db.transaction(function(tx){
    	tx.executeSql('SELECT p.*,c.*,ca.titulo AS projeto FROM POSTIT p JOIN COR c ON c.id_cor = p.id_cor JOIN CANVAS ca ON ca.id_canvas = p.id_canvas WHERE p.id_canvas = '+parameter, [], function(tx, results){
    		 
    		var len = results.rows.length;
    		//alert(len);
    		if(len == 0 ){
    			//alert("Entrei no if do len com o parameter: "+ parameter );
    			tx.executeSql('SELECT * FROM CANVAS WHERE id_canvas = '+parameter, [], function(tx, results){
    	    		var len = results.rows.length;
    	    		//alert("dentro: "+ len);
    	    		for(var i = 0; i<len; i++){
    	    			for(prop in results.rows.item(i)){
    	    				//alert("PROP: " + prop + " Valor: " + results.rows.item(i).prop);
    	    			}
    	    			titulo = results.rows.item(i).titulo;

    	    		}
    			});
    			$('#appHeader > h1').html(decodeURIComponent(titulo));
    		}
    		for(var i=0;i<len;i++){    			 
    			$('#appHeader > h1').html(decodeURIComponent(results.rows.item(i).projeto));
					
					var cssPosition = {
						left: 	results.rows.item(i).x,
						top: 	results.rows.item(i).y
					}


				if ($('#q_'+results.rows.item(i).id_quadrante).children().hasClass('draggable')) {
					$('#canvas').append(
							'<div id="postit_'+results.rows.item(i).id_postit+'" class="draggable '+results.rows.item(i).nome.toLowerCase()+'" >'+
								'<div id="'+results.rows.item(i).id_postit + '" class="descPostit">' +
								'<h5 style="margin: 3px; padding: 0;" onclick="javascript:inplaceDescription('+results.rows.item(i).id_postit+')">'+results.rows.item(i).titulo_postit+': '+results.rows.item(i).x+'</h5></div>'+
							'</div>');
					
									
					$('.draggable').bind("taphold",function(e){
					 	postit = $(e.target);

				    	if(postit.attr('id')){      		
				    		$("#popupMenu").popup( "open" );    		
				    	}	
					});
					
					$('#postit_'+results.rows.item(i).id_postit).css(cssPosition);

					$('#postit_'+results.rows.item(i).id_postit).draggable({contaiment: document},{scroll: false});

				}else{
					$('#canvas').append(
							'<div id="postit_'+results.rows.item(i).id_postit+'" class="draggable '+results.rows.item(i).nome.toLowerCase()+'">'+
							'<div id="'+results.rows.item(i).id_postit + '" class="descPostit">'+
							'<h5 style="margin: 3px; padding: 0;"  onclick="javascript:inplaceDescription('+results.rows.item(i).id_postit+')">'+results.rows.item(i).titulo_postit+'</h5></div>'+
					'</div>');
					
					$('.draggable').bind("taphold",function(e){
					 	postit = $(e.target);
				    	
				    	if(postit.attr('id')){      		
				    		$("#popupMenu").popup( "open" );    		
				    	}	
					});
					
					$('#postit_'+results.rows.item(i).id_postit).css(cssPosition);
					
					$('#postit_'+results.rows.item(i).id_postit).draggable({contaiment: document},{scroll: false});
				}
			 }
			
    	}, errorSQL);
    }
    , errorSQL);
    
    /*
	* #Função 
	* @author: Leidson Cruz 
	* @name: errorSQL 
	* @description: Listar erro ao executar algum comando SQL
	*/
    function errorSQL(err) {
    	console.log("Erro ao processar SQL: " +err);
    }
    
    $("#appHeader > a.icon.icon-back").on("click", function(){
    	
    	$.mobile.changePage('file:///android_asset/www/index.html', {changeHash: false});
    });
    
	/*
	* #Função 
	* @author: Leidson Cruz 
	* @name: Draggable 
	* @description: Move o post-it pela tela
	*/
	$(".draggable").draggable({contaiment: document},{scroll: false});

	/*
	* #Função 
	* @author: Leidson Cruz 
	* @name: Droppable 
	* @description: Dropa post-it no quadrante e chama função para salvar no banco
	*/
	$(".quadrants").droppable({
		drop : function(event, ui) {
			var db = window.openDatabase("CanvasForAll8", "1.16", "Canvas Mobile",2000000);

			
			position_x = ui.offset.left;
			position_y = ui.offset.top ;
			var quadrante = $(this).attr('id');

			quadrante = quadrante.replace('q_','');
			var post = $(ui.draggable).attr("id");
			post = post.replace('postit_','');
			if(quadrante){			
				db.transaction(function(tx){    	
			    	tx.executeSql('UPDATE POSTIT SET id_quadrante =  ?,  x = ?, y = ? WHERE id_postit = ?',
	    			[quadrante,position_x,position_y,post], function(tx,results){
			    		//caso tenhamos que fazer algo após o update
			    	});
			    });				
			}						
		}
	});
	
	/*
	* #Função 
	* @author: Leidson Cruz 
	* @name: Tap holder canvas 
	* @description: Ao segurar dedo na tela é criado um novo post-it e inserido no banco
	*/

	var position_x = 0;
	var position_y = 0;


	$('#canvas').on("vmouseover", function(e){
		
			position_y = e.pageY - 50;
			position_x = e.pageX - 50;

	});


    $('.quadrants').bind("taphold", function(e){
		var quadrante = $(e.target).attr('id').replace('q_','');
		var titulo = "Toque para alterar...";

		
		var cssPosition = {
			left: 		position_x,
			top: 		position_y,
			position: 	"absolute"
		}
		
		if($(e.target).hasClass('quadrants')){

			if(quadrante){
				db.transaction(function(tx){
					tx.executeSql(
							"INSERT INTO POSTIT (titulo_postit, descricao_postit, id_quadrante,id_canvas,id_cor,id_perfil,data_ultima_atualizacao, x, y) VALUES (?,?,?,?,?,?,datetime('now'),?,?)",
							[titulo,'sem descrição v01',quadrante,parameter,1,1,position_x, position_y],
			                function(tx, results){
			                	tx.executeSql('SELECT * FROM POSTIT WHERE id_canvas = ? ORDER BY id_postit DESC LIMIT 1', [parameter], function (tx, results) {					   
									   var len = results.rows.length;
									   for (var i=0; i<len; i++){
										   $('#canvas').append('<div id="postit_'+results.rows.item(i).id_postit+'" class="draggable yellow">'+
												   '<div id="'+results.rows.item(i).id_postit+ '" class="descPostit">'+
												   '<h5 style="style="margin: 3px; padding: 0;" onclick="javascript:inplaceDescription('+results.rows.item(i).id_postit+')">'+results.rows.item(i).titulo_postit+'</h5></div>'+
								                '</div>');
										$('.draggable').bind("taphold",function(e){

												postit = $(e.target);
										    	
										    	if(postit.attr('id')){      		
										    		$("#popupMenu").popup( "open" );    		
										    	}	
											});
										   $('#postit_'+results.rows.item(i).id_postit).css(cssPosition);
										   $('#postit_'+results.rows.item(i).id_postit).draggable({contaiment: document},{scroll: false});
											
									   }
								});
			                }
		            );
			    });
			}
    	}
				
	});


    
    /*
	* #Função 
	* @author: Leidson Cruz 
	* @name: Tap postit 
	* @description: Ao segurar dedo no postit um mini menu com cor e exclusão aparece
	*/	
    /*$('.openMenu').bind("tap", function(e){    	
    	postit = $(e.target);
    	console.log(postit.attr('id'));
    	if(postit.attr('id')){      		
    		$("#popupMenu").popup( "open" );    		
    	}
    });*/
});


function inplaceDescription(postit){
	var desc = '  ';
	var descricao = $('#'+postit+' > h5').html();
	var background = $('#postit_'+postit).css( "background-color" );
	$('#'+postit).remove();

	if(descricao != 'Toque para alterar...'){
		desc = descricao;
	}
	
	$('#postit_'+postit).append(
				'<textarea style="color: #3E3E3E; text-shadow: 1px 1px 1px #FFFFFF; font-weight: bold; font-size: 0.8em; text-align: center; width: 95%; height: 95%; border:none; background-color: '+background+';" id="inplace_postit">'+ desc +'</textarea>');
	
	$('#inplace_postit').bind({
		change: function(){
			var novaDesc = $('textarea#inplace_postit').val();
			updateTitle(postit, novaDesc);
		},
		blur: function(){
			$('#inplace_postit').remove();
			$('#postit_'+postit).append(
				'<div id="'+postit+'" class="descPostit">'+
					'<h5 style="margin: 3px; padding: 0;" '+
						' onclick="javascript:inplaceDescription('+postit+')">'+descricao+'</h5>'+
				'</div>'
			); 
		},
		tap: function(){
			$('#inplace_postit').click();
			if(device.platform === 'Android'){
				var softKeyBoard = window.plugins.softKeyboard;
				$('#inplace_postit').trigger(softKeyBoard.show());
			}
		}
	});
	
	$('#inplace_postit').focus();
	$('#inplace_postit').tap();
}

/*
* #Função 
* @author: Leidson Cruz 
* @name: updateTitle
* @description: Atualizar título do postit
*/
function updateTitle(id, descricao){
	
	if(descricao != null && descricao.length > 100){
		window.alert('A descrição não pode ser superior a 100 caracteres.');
		return;
	}

	if(descricao != null && descricao.length > 0){
		var db = window.openDatabase("CanvasForAll8", "1.16", "Canvas Mobile", 2000000);
		db.transaction(function(tx){
			tx.executeSql('UPDATE POSTIT SET titulo_postit = ? WHERE id_postit = ?', [descricao, id], function(tx,results){
				editDescription(id, descricao);
			});
		});
	}
}


/**
 * Function
 * @author Diogo Medeiros
 * Aplicar no HTML a alteração da descrição do Post-it * 
 * */
function editDescription(postit, descricao){
	$('#'+postit).remove();
	$('#postit_'+postit).append(
		'<div id="'+postit+'" class="descPostit">'+
			'<h5 style="margin: 3px; padding: 0;" '+
				' onclick="javascript:inplaceDescription('+postit+')">'+descricao+'</h5>'+
		'</div>'
	);
}




/*
* #Função 
* @author: Leidson Cruz 
* @name: Change color
* @description: mudar cor do post it
*/
function changeColor(cor,id){		
	var db = window.openDatabase("CanvasForAll8", "1.16", "Canvas Mobile",2000000);	
	var post = postit.attr('id').replace('postit_','');
	
	if(post){			
		db.transaction(function(tx){    	
	    	tx.executeSql('UPDATE POSTIT SET id_cor =  ? WHERE id_postit = ?',
			[id,post], function(tx,results){
	    		$('#'+postit.attr('id')).removeClass();
	    		$('#'+postit.attr('id')).addClass('draggable '+cor+' ui-draggable');
	    		$( "#popupMenu").popup( "close" );	    	
	    	});
	    });				
	}	
}

/*
* #Função 
* @author: Leidson Cruz 
* @name: Delete Post It
* @description: deletar post it
*/
function deletePostit(){
	if (confirm("Apagar Post it?")) {
		var db = window.openDatabase("CanvasForAll8", "1.16", "Canvas Mobile",2000000);	
		var post = postit.attr('id').replace('postit_','');
		
		if(post){			
			db.transaction(function(tx){    	
		    	tx.executeSql('DELETE FROM POSTIT WHERE id_postit = ?',
				[post], function(tx,results){
		    		$('#'+postit.attr('id')).remove();	    		
		    		$( "#popupMenu").popup( "close" );
		    	});
		    });				
		}
	}
}


